<template>
    <a-carousel arrows autoplay class="Carousel">
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-circle-outlined />
        </div>
      </template>
      <div class="CarouselImg" v-for="item in data" :key="item">
        <img :src="item" alt="" srcset="">
      </div>
    </a-carousel>
  </template>
  <script setup>
  import { reactive } from 'vue'
  import {LeftCircleOutlined,RightCircleOutlined} from '@ant-design/icons-vue'
  import Photo1 from '../../assets/img/earth-1756274_1280.webp'
  import Photo2 from '../../assets/img/forest-3622519_1280.jpg'
  import Photo3 from '../../assets/img/ocean-3605547_1280.jpg'
  const data= reactive([
  Photo1,
  Photo2,
  Photo3
  ])
  
  </script>
  <style scoped>
  /* For demo */
  :deep(.slick-slide) {
    text-align: center;
    height: 800px;
    /* line-height: 520px; */
    background: #364d79;
    overflow: hidden;
  }
  :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    transition: ease all 0.3s;
    opacity: 0.3;
    z-index: 1;
  }
  :deep(.slick-arrow.custom-slick-arrow:before) {
    display: none;
  }
  :deep(.slick-arrow.custom-slick-arrow:hover) {
    color: #fff;
    opacity: 0.5;
  }
  
  :deep(.slick-slide h3) {
    color: #fff;
  }
  
  
  
  
  
  .Carousel {
    margin-bottom: 20px;
  }
  
  .CarouselImg {
    position: relative;
    height: 800px;
  }
  .CarouselImg img{
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  </style>